<template>
	<view class="my">
		<view :style="{height: safeTop+'px'}">
		</view>
		<view style="padding: 30px 20px 20px;" :style="{height: 'calc(100vh - ' + (safeTop) + 'px)'}">
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<view style="display: flex;align-items: center;">
					<button open-type="chooseAvatar" @chooseavatar="updateAvatar" type="default"
						style="background-color: gray; padding: 0; width: 56px; height: 56px; border-radius: 28px;"
						size="mini">
						<image style="width: 56px;" :src="user.avatar" mode="widthFix"></image>
					</button>
					<view style="margin-left: 15px; display: flex; flex-direction: column;">
						<text style="margin-bottom: 3px; font-size: 16px;color: white">{{user.userName}}</text>
						<text style="margin-bottom: 3px; font-size: 16px;color: white">{{user.nickName}}</text>
						<!-- <text style="margin-bottom: 3px; font-size: 22px;color: white">{{梁文涛}}</text> -->

					</view>
				</view>
				<view class="" @tap="toMyInfo">
					<uni-icons type="gear" size="32" color="white"></uni-icons>
				</view>
			</view>


			<view class="user-achieve">
				<view class="item">
					<text class="number">{{22}}</text>
					<text class="desc">粉丝</text>
				</view>
				<view class="item">
					<text class="number">{{22}}</text>
					<text class="desc">关注</text>
				</view>
				<view class="item">
					<text class="number">{{22}}</text>
					<text class="desc">获赞</text>
				</view>
				<view class="item">
					<text class="number">{{22}}</text>
					<text class="desc">收藏</text>
				</view>
			</view>


			<view class="opr-list">
				<view class="item">
					<uni-icons type="flag" color="#404040" size="28"></uni-icons>
					<text>作业提交记录</text>
				</view>
				<view class="item" @tap="toFavoriteList">
					<uni-icons type="star" color="#404040" size="28"></uni-icons>
					<text>收藏夹</text>
				</view>
				<view class="item">
					<uni-icons type="hand-up" color="#404040" size="28"></uni-icons>
					<text>赞过</text>
				</view>
				<view class="item" @tap="toMyPublish">
					<uni-icons type="bars" color="#404040" size="28"></uni-icons>
					<text>我的分享</text>
				</view>
			</view>

			<view class="opr-list">
				<view class="item">
					<uni-icons type="font" color="#404040" size="28"></uni-icons>
					<text>成绩查询</text>
				</view>
				<view class="item" @tap="toMyCourseTable">
					<uni-icons type="vip" color="#404040" size="28"></uni-icons>
					<text>我的课表</text>
				</view>
				<view class="item" @tap="toMyClassesInfo">
					<uni-icons type="auth" color="#404040" size="28"></uni-icons>
					<text>我的班级</text>
				</view>
				<view class="item">
					<uni-icons type="phone" color="#404040" size="28"></uni-icons>
					<text>班级通知</text>
				</view>

				<view class="item">
					<uni-icons type="chatboxes" color="#404040" size="28"></uni-icons>
					<text>交流群</text>
				</view>
				<view class="item">
					<uni-icons type="locked" color="#404040" size="28"></uni-icons>
					<text>修改密码</text>
				</view>
				<view class="item" @tap="logout">
					<uni-icons type="minus" color="#404040" size="28"></uni-icons>
					<text>退出登录</text>
				</view>
				<view class="item">
					<uni-icons type="more-filled" color="#404040" size="28"></uni-icons>
					<text>更多设置</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	import {
		useUserStore
	} from '@/store/store.js';
	const userStore = useUserStore()
	const user = ref(userStore.userInfo)
	const userId = user.value.userId
	const classList = ref([]); // 存储班级列表数据，格式为[{value: 班级ID, text: 班级名称}]
	const logout = () => {
		uni.showModal({
			title: '注销',
			content: '您确定退出登录？',
			success: function(res) {
				if (res.confirm) {
					uni.setStorageSync('userInfo', null)
					userStore.refreshUserInfo(null)
					uni.reLaunch({
						url: '/pages/login'
					})

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	const toMyInfo = () => {
		console.log("---->")
		uni.navigateTo({
			url: '/pages/my/my-info'
		})
	}
	
	const toMyClassesInfo = () => {
		console.log("---->")
		uni.navigateTo({
			url: '/pages/my/classes-info'
		})
	}
	
	const toMyCourseTable = () => {
		uni.switchTab({
			url: '/pages/course-table/course-table'
		})
	}
	


	// 更换头像
	/*
		1. 选择头像
		2. 调接口 上传新头像
		3. 调接口 更新用户表avatar
		4. 前端更新pinia和storage
	*/





	import imageApi from '@/api/imageFile.js'
	import userApi from '@/api/user.js'
	const avatarVo = ref({
		userId: userId,
		fileName: ''
	})
	const updateAvatar = async (e) => {
		// 调接口 上传新头像
		imageApi.uploadFile(e.detail.avatarUrl).then(res => {
			user.value.avatar = e.detail.avatarUrl;
			const fileName = res.data.fileName
			console.log("my页面fileName----->", fileName)
			// 调接口 更新用户表avatar
			avatarVo.value.fileName = fileName;
			userApi.updateUserAvatar(avatarVo.value).then(updateRes => {
				if (updateRes.code == 200) {
					console.log("my页面updateRes.data----->", updateRes.data)
					// 更新pinia和storage
					userStore.refreshUserInfo(res.data);
					console.log("头像更新-------------------")
					uni.showToast({
						title: "头像已更新"
					})
				}
			})
		});
	}



	// const safeTop = ref(0)
	// onLoad(() => {
	// 	let {
	// 		safeArea
	// 	} = uni.getSystemInfoSync()
	// 	safeTop.value = safeArea.top;
	// })
</script>

<style lang="scss">
	.my {
		background: linear-gradient(to top, #fafafa 45%, #d2302c 80%, #d2302c 100%, );

		.user-achieve {
			display: flex;
			justify-content: space-around;
			margin: 30px 0;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.number {
					font-size: 18px;
					font-weight: bold;
					color: white;
				}

				.desc {
					color: white;
					font-size: 14px;
					line-height: 26px;
				}
			}
		}

		.opr-list {
			background-color: white;
			border-radius: 10px;
			display: flex;
			justify-content: space-around;
			padding-top: 20px;
			margin-bottom: 20px;
			flex-wrap: wrap;

			.item {
				width: 24%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20px;

				text {
					font-size: 12px;
					color: #404040;
					margin-top: 3px;
				}
			}
		}
	}
</style>